<template>
  <div class="ueditor">
    <script :id="uuid" type="text/plain"></script>
  </div>
</template>
<style scoped>
.ueditor {
  line-height: 1;
}
</style>
<script>
import '../../../static/ueditor/ueditor.config.js'
import '../../../static/ueditor/ueditor.all.js'
import '../../../static/ueditor/lang/zh-cn/zh-cn.js'
import '../../../static/ueditor/ueditor.parse.min.js'
import uuid from 'uuid'
export default {
  name: 'UE',
  data() {
    return {
      uuid: uuid(),
      editor: null
    }
  },
  props: {
    value: String,
    config: {
      type: Object
    },
    sample: false
  },
  mounted() {
    this.$nextTick(() => {
      let config
      if (this.sample) {
        config = this.JSONo(this.config, {
          zIndex: 1,
          toolbars: [
            ['fullscreen', 'source', 'undo', 'redo', 'bold', 'italic', 'underline', 'fontfamily', 'fontsize', 'justifyleft', 'justifyright', 'justifycenter', 'justifyjustify', 'formatmatch', 'lineheight', 'rowspacingtop', 'rowspacingbottom', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist']
          ]
        })
      } else {
        config = this.JSONo(this.config, { zIndex: 1 })
      }
      this.editor = window.UE.getEditor(this.uuid, this.JSONo(config, {
        serverUrl: '/api1/upload/upload?accessToken=' + this.$store.state.user.token
      }))
      this.editor.addListener('ready', () => {
        this.editor.setContent(this.value || '')
      })
      this.editor.addListener('contentChange', () => {
        this.$emit('input', this.editor.getContent())
      })
    })
  },
  methods: {
  },
  destroyed() {
    this.editor.destroy()
  }
}
</script>